<template>
  <div>
<h1>computed 函数使用</h1>
<ul>
  <li> 基本工资{{monkey}} </li>
   <li>加薪后 {{addMonkey}} </li>
  <li>
    <button @click="add">加薪</button>
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  </div>
</template>

<script>
import { computed, ref } from '@vue/reactivity'
export default {
  setup () {
    // 1e4 科学计算法===1000
    const monkey = ref(1e4)

    // 计算加薪
    const addMonkey = computed(() => {
      // monkey 发生变化时就会执行
      return monkey.value + Math.random(1e4)
    })

    // 点击加薪
    const add = () => {
      monkey.value = Math.random() * 2e4 + 1e4
    }

    return { monkey, addMonkey, add }
  }
}
</script>

<style lang="scss" scoped>

</style>
